<template>
    <div class="box">
        <n-space vertical>
            <n-form
            ref="formRef"
            :model="model"
            label-placement="left"
            :label-width="160"
            class="setting-cont"
            >
            <n-form-item label="分配账号" >
                <n-input v-model:value="model.username" placeholder="请输入账号" />
            </n-form-item>

            <n-form-item label="默认密码" >
                <n-input  v-model:value="model.password" placeholder="请输入密码" type="password" />
            </n-form-item>
            <n-form-item label="关联角色" path="selectValue" >
                <n-select
                v-model:value="model.roleId"
                placeholder="请选择角色"
                :options="rolelist"
                label-field="roleName"
                value-field="_id"
                />
            </n-form-item>
            <n-form-item label=" " >
                <n-button type="primary" size="medium" @click="handelRegister" block>确认分配</n-button>
            </n-form-item>
            
            </n-form>
        </n-space>
    </div>
 
</template>

<script setup>

import { ref } from 'vue';
import { roleGetApi, userRegApi } from '../../api/user';
  
  const rolelist = ref([]);
  roleGetApi().then(res=>{
    rolelist.value = res.data.data
  })

const model = ref({
   username:'',
   password:'',
   roleId:'',
})
const formRef = ref(null);
const handelRegister = async ()=>{
    await userRegApi(model.value)//新增
}
</script>

<style lang="scss" scoped>
.setting-cont{
    margin-right: 160px;
}
</style>